<template>
    <div class="Index">
        <div class="rotation">
            <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for=" (img, index) in imgs" :key="index">
                    <div class="context">
                        <img class="imgs" :src="img">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="news" :model="news">
            <h1 style=" font-family: textFont; margin-bottom: 10px; font-size: 30px;">校园资讯</h1>
            <ul class="new">
                <li v-for="item in news ">
                    <h3 style="margin-top: 15px; font-size: 26px; line-height: 40px;">{{ item.title }}</h3>
                    <span
                        style="text-align: left; display: block; margin-top: 10px; font-size: 18px; line-height: 28px; font-family:xingKai ; font-weight: 400; padding: 5px; text-indent: 2rem;">
                        {{ item.content }}</span>
                </li>
            </ul>
        </div>


        <div class="course" :model="course">
            <h1 style=" font-family: textFont; margin-bottom: 10px; font-size: 30px; width: 100%;">课程信息</h1>
            <div class="card" v-for="(item, index) in course" :key="index">
                <div class="picture">
                    <p>
                        <img src="../../assets/course.jpg" width="130px" height="108px" alt="">
                    </p>
                </div>
                <div class="name">
                    <p> {{ item.kechengmingcheng }}</p>
                </div>
                <div class="jobtitle">
                    <p>{{ item.jiaoshixingming }}</p>
                </div>

                <div class="buttons">
                    <div class="button1">
                        <button @click="showCourse(item)">详细信息</button>
                    </div>
                    <div class="button2" @click="Study(item)">
                        <button>加入学习</button>
                    </div>
                </div>
            </div>
        </div>






        <el-dialog class="el_dialog" title="课程信息" :visible.sync="dialogTableVisible" width="30%" top="5%">
            <div class="courseInfo" :model="courseInfo">
                <p style="width: 100%; text-align: center;"><img src="../../assets/course.jpg" width="130px" height="108px"
                        style="margin-bottom: 10px;"> </p>
                <p class="title">课程名称：</p>
                <p class="content">{{ courseInfo.kechengmingcheng }}</p>
                <p class="title">课程类型：</p>
                <P class="content">{{ courseInfo.kechengleixing }}</P>
                <p class="title">教师姓名：</p>
                <P class="content">{{ courseInfo.jiaoshixingming }}</P>
                <p class="title">课程详情：</p>
                <P class="content">{{ courseInfo.kechengxiangqing }}</P>
                <p class="title">价格：</p>
                <P class="content">{{ courseInfo.price }}</P>
            </div>
        </el-dialog>

        <el-dialog class="el_dialog1" title="欢迎购买" :visible.sync="dialogTableVisible1" width="30%" top="5%">
            <p :model="payPrice" class="title">当前价格为{{ payPrice }}元，是否加入学习课程?</p>
            <span slot="footer" class="dialog-footer">
                <el-button class="buttonPay" @click="closePay">取 消</el-button>
                <el-button class="buttonPay" @click="submitPay">{{ buttonName }}</el-button>
            </span>
        </el-dialog>

    </div>
</template> 



<script>
export default {
    name: 'Index',
    data() {
        return {
            imgs: [
                "../../../static/Rotation/one.jpg",
                "../../../static/Rotation/two.jpg",
                "../../../static/Rotation/two.jpg",
                "../../../static/Rotation/one.jpg",
                "../../../static/Rotation/two.jpg",
                "../../../static/Rotation/two.jpg",
            ],
            //新闻
            news: [],
            course: [],
            courseInfo: {},
            dialogTableVisible: false,
            dialogTableVisible1: false,
            selectInfo: {
                studentid: "",
                jiaoshigonghao: "",
                courseid: "",
                coursename: "",
                coursetype: "",
                jiaoshixingming: "",
                xueshengxingming: "",
            },
            orders: {
                studentid: "",
                jiaoshigonghao: "",
                courseid: "",
                coursename: "",
                jiaoshixingming: "",
                studentname: "",
                courseprice: "",
                pay: "",
                coursetype: "",
            },
            //确认窗口的价格显示变量
            payPrice: "",
            //确认窗口的按钮名称
            buttonName: "",
        }
    },
    methods: {
        getNews() {

            this.axios.get("/news/getnews")
                .then(res => {
                    this.news = res.data;
                })
        },

        getCourse() {
            this.axios.get("/kechengxinxi/getcourse")
                .then(res => {
                    this.course = res.data;
                })
        },
        getstudent() {
            this.axios.get("/student/getstudent")
                .then(res => {
                    this.selectInfo.studentid = res.data.id;
                    this.selectInfo.xueshengxingming = res.data.xueshengxingming;
                    this.orders.studentname = res.data.xueshengxingming;
                    this.orders.studentid = res.data.id;
                })
        },
        showCourse(val) {
            this.dialogTableVisible = true;
            this.courseInfo = val;
        },
        //点击学习按钮
        Study(val) {
            this.selectInfo.courseid = val.id;
            this.selectInfo.coursename = val.kechengmingcheng;
            this.selectInfo.coursetype = val.kechengleixing;
            this.selectInfo.jiaoshixingming = val.jiaoshixingming;
            this.selectInfo.jiaoshigonghao = val.jiaoshigonghao;
            this.orders.jiaoshigonghao = val.jiaoshigonghao;
            this.orders.courseid = val.id;
            this.orders.coursename = val.kechengmingcheng;
            this.orders.jiaoshixingming = val.jiaoshixingming;
            this.orders.courseprice = val.price;
            this.orders.coursetype = val.kechengleixing;
            this.orders.pay = 1;
            this.payPrice = val.price;
            if (this.payPrice === 0) {
                this.buttonName = "学 习";
            } else {
                this.buttonName = "购 买";
            }
            this.dialogTableVisible1 = true;
        },
        addStudy() {
            this.axios.post("/courseselection/save", this.selectInfo)
                .then(res => {
                    if (res.data === "success") {
                        this.$message({
                            type: "success",
                            message: "购买成功，已自动加入课程",
                        })
                    } else if (res.data === "no") {
                        this.$message({
                            type: "error",
                            message: "购买失败！自动加入课程失败",
                        })
                    }
                })
        },
        //关闭pay页面
        closePay() {
            this.dialogTableVisible1 = false;
        },
        //支付成功
        submitPay() {
            this.axios.post("/orders/save", this.orders)
                .then(res => {
                    if (res.data === "success") {
                        this.$message({
                            type: "success",
                            message: "购买成功"
                        })
                        this.addStudy();
                    } else if (res.data === "no") {
                        this.$message({
                            type: "error",
                            message: "用户信息丢失，购买失败，请重新登录"
                        })
                    } else if (res.data === "exist") {
                        this.$message({
                            type: "error",
                            message: "该课程已经被购买，不能重复购买"
                        })
                    }
                })
            this.dialogTableVisible1 = false;
        },
    },
    mounted() {
        this.getNews();
        this.getCourse();
        this.getstudent();
    }
}

</script>




<style scoped>
@font-face {
    font-family: "Heavy";
    src: url(../../font/思源柔黑等宽版Heavy.ttf);
}

@font-face {
    font-family: "textFont";
    src: url(../../font/也字工厂喵喵体.ttf);
}

@font-face {
    font-family: "xingKai";
    src: url(../../font/也字工厂世无双行楷.ttf);
}

.Index {
    width: 100%;
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.rotation {
    padding-top: 10px;
    margin-bottom: 10px;
}

.news {
    width: 83%;
    margin: 0 auto;
    text-align: center;
}

.new {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.new li {
    width: 235px;
    height: 300px;
    margin-bottom: 10px;
    margin-right: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* 毛玻璃 */
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}


.new li:hover {
    transform: scale(1.1);
    border-radius: 20px;
    box-shadow: 0px 0px 30px 1px rgba(214, 92, 26, 0.3);
}

/* 轮播图 */

.el-carousel__item:nth-child(2n) {
    background-color: #E9EEF3;

}

.el-carousel__item {
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #E9EEF3;
}

.imgs {
    width: 100%;
    height: 100%;
}

/* endding */



.course {
    width: 83%;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

/* courseInfo */
.card {
    width: 230px;
    height: 254px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;

    /* 毛玻璃 */
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
}

.card .picture,
.card .name,
.card .jobtitle,
.card .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .picture {
    height: 108px;
    width: 130px;
    margin: auto;
    margin-top: 10px;
    cursor: pointer;
    transition: all .3s;
}

.card .picture p {
    font-size: .8em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.buttons>div {
    padding: .5em;
}

button {
    padding: .5em;
    outline: none;
    background: transparent;
    border: 1px solid #0f0f0f6b;
    border-radius: .4em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: all .3s;
    font-size: .7em;
}

.card button:hover {
    background: #252525;
    color: #f1f5f3;
}

.card .name p {
    margin-top: 8%;
    margin-bottom: 5%;
    font-size: 1em;
}

.card .jobtitle p {
    margin-bottom: 5%;
    font-size: .54em;
    text-transform: uppercase;
    letter-spacing: .5em;
}


.card:hover {
    transform: translateZ(0) scale(1.1);
    border-radius: 20px;
}

/* endding */

.courseInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.el_dialog .courseInfo .title {
    width: 25%;
    font-size: 20px;
    font-weight: 700;
    height: 30px;
    font-family: textFont;
    line-height: 30px;
}

.el_dialog1 .title {
    font-size: 20px;
    font-weight: 700;
    height: 30px;
    font-family: textFont;
    line-height: 30px;
}

.el_dialog1 .buttonPay {
    width: 80px;
    height: 40px;
    font-size: 20px;
    font-family: textFont;
}

.el_dialog .courseInfo .content {
    width: 70%;
    font-size: 20px;
    font-family: textFont;
    line-height: 35px;
}
</style>